<template>
    <el-row class="main-cont padd20 box box-tb">
        <el-row>
            <el-col class="title box box-pack-between">
                <span class="box box-align-center">劳动课程 共{{ cousList.length }}套</span>
                <div class="btn">
                    <el-button class="reset-comfirm-btn" @click="showcous()" v-if="maxRole == `admin`">
                        引用</el-button>
                    <el-button class="reset-comfirm-btn" style="background: #626bf1; color: #fff;" @click="clickAdd">+
                        创建</el-button>
                </div>
            </el-col>
        </el-row>
        
        <el-row :gutter="20" class="box box-pack-start padd20" style="height: calc(100% - 40px);">
            <el-col :span="24" v-if="cousList.length > 0">
                <el-col :span="6" class="col-list cp mb20 minwith200 mr10" v-for="(item, index) in cousList" :key="index"
                    @click.native="handleEdit(item)">
                    <div class="grid-content bg-purple">
                        <el-image :src="item.image ? item.image : item.img" class="img" fit="cover" style="width: 100%;">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>

                        <el-col class="tl course-name" :title="item.name">
                            {{ item.name }}
                        </el-col>
                        <el-col class="tl">
                            <span style="width: 120px;font-size: 14px;">共{{ item.num || 0 }}章</span>
                        </el-col>
                        <el-col class="tl">
                            <span style="width: 180px;font-size: 14px;">主编：{{ item.chiefEditor }}</span>
                        </el-col>
                        <!-- <el-col v-if="maxRole == 'cmo'">
                            <el-button type="primary" size="mini" @click.stop="publicCourseCmo(item)">添加到公共课程
                            </el-button>
                        </el-col> -->
                    </div>
                    <!--  <div class="delete" @click.stop="handleDelete(item.id)"
                        v-if="maxRole == `admin` || maxRole == `cmo`">删除</div> -->
                    <div class="delete" @click.stop="">
                        <el-dropdown>
                            <el-tag type="info">
                                <i class="el-icon-more"></i>
                            </el-tag>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="add" v-if="maxRole == 'cmo'"
                                    @click.native="publicCourseCmo(item, item.status)">{{ item.status ? `取消发布` : `添加到公共课程`
                                    }}</el-dropdown-item>
                                <el-dropdown-item command="edit" @click.native="handleEdit(item)">编辑</el-dropdown-item>
                                <el-dropdown-item command="delete"
                                    @click.native="handleDelete(item.id)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
                <el-col>
                    <el-pagination layout="prev, pager, next" hide-on-single-page :current-page.sync="pages.page"
                        @current-change="handleCurrentChange" :total="pages.total">
                    </el-pagination>
                </el-col>
            </el-col>
            <el-col v-else>
                <NoData title="暂无课程"></NoData>
            </el-col>
        </el-row>
        <diaLogs :dialogVisible="dialogVisible" @clickClose="clickClose()" @xtjyUserList="xtjyUserList" :title="title"
            :info="info" :jyzid="jyzid" ref="child">
        </diaLogs>
        <edits :dialogeditVisible="dialogeditVisible" @clickCloses="clickCloses()" :titles="titles" :jyzids="jyzids"
            ref="fhaj"></edits>

        <selectCous :dialogVisible="showcouslist" :testdata="cousList" @clickClose="closecouslist()" title="选择公共课程"
            ref="clist" @saveCous="saveCous">
        </selectCous>
    </el-row>
</template>

<script>
import {
    wyv3put,
    wyv3post
} from "@/http/axios.js";
import edits from './components/edit.vue';
import diaLogs from './components/dialog.vue';
import selectCous from './components/couslist.vue'
export default {
    components: {
        diaLogs,
        edits,
        selectCous
    },
    data() {
        return {
            ldData: [],
            showcouslist: false,
            cousList: [],
            cyList: [],
            dialogVisible: false, //添加成员
            dialogeditVisible: false, //教研团队信息
            courseSHow: false, //创建劳动课程
            title: "添加成员",
            titles: '教研团队信息',
            tip: "创建劳动课程",
            info: {},
            jyzList: [],
            loginInfo: this.$store.state.loginInfo,
            jyzid: 0,
            jyzids: 0,
            addShow: false,
            schoolid: this.$store.state.schoolId,
            maxRole: this.$store.state.maxRole,
            isIndeterminate: false,
            check: [],
            checkAll: false,
            checkedGameId: [],
            number: 0,
            pages: {
                rows: 8,
                page: 1,
                total: 0
            }
        };
    },
    // computed: {
    //     none() {
    //         return this.cyList.filter(function(val){
    //             return
    //         }).length
    //     }
    // },
    mounted() {
        console.log(222222)
        if (this.maxRole == 'team' || this.maxRole == 'jyzz') {
            this.addShow = true;
        }
        debugger
        if (this.maxRole == 'cmo') {
            this.getCmoCourse()
        } else {
            this.getJyzData();
        }
    },
    methods: {
        closecouslist() {
            this.showcouslist = false;
        },
        showcous() {
            this.$refs.clist.getCourseList();
            this.showcouslist = true;
            this.ldData = []
            this.cousList.forEach((item, i) =>{
                console.log(item.id)
                this.ldData.push(item.id)
            })
        },
        //切换分页数据
        handleCurrentChange(val) {
            this.pages.page = val
            if (this.maxRole == 'cmo') {
                this.getCmoCourse()
            } else {
                this.listLdkcc();
            }
        },
        //运营管理员获取公共课程
        getCmoCourse() {
            let params = {
                ...this.pages
            }
            delete params.total
            this.$api.wyv3.getCmoCousList(params).then(res => {
                console.log(res.data.records, 'aaaaaaaaaa')
                if (res.code == 200) {
                    this.cousList = res.data.records;
                    this.pages.rows = res.data.size
                    this.pages.page = res.data.current
                    // console.log(this.cousList,'this.cousListthis.cousListthis.cousList-----')
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        publicCourseCmo(cous, status) {
            this.$confirm(`${status ? '确定取消发布公共课程吗？' : '确定添加到公共课程吗？'}`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = status ? '/cous/public/cancel' : '/cous/public';
                let params = {
                    cousid: cous.id
                }
                if (!status) {
                    wyv3post(url, params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.getCmoCourse();
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        }
                    })
                } else {
                    wyv3put(url, params).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.getCmoCourse();
                            this.$message({
                                message: '取消成功',
                                type: 'success'
                            });
                        }
                    })
                }
            }).catch(() => { })
        },

        saveCous(cous) {
            console.log(cous, 'cous///////=========')
            if(cous.length>0){
                this.$confirm('确定将111【' + cous + '】添加到课程管理吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.3)'
                    });
                    
                        let url = '/ycous/copyCousToSchool';
                        cous.forEach((item, i) => {
                        
                            console.log(item, '引用id')  //直到这里的id都是对的  但是添加上去之后回显出来的就不对了
                            let params = {
                                cousid: item,
                                schoolid: this.schoolid
                            };
                            this.$ajax.post(url, params).then(res => {
                                loading.close();
                                if (res.code == 0) {
                                    this.listLdkcc()
                                    this.$message.success('添加成功')
                                } else {
                                    this.$message.error(res.code)
                                }
                            })
                        })
                }).catch(() => { })
            }else{
                this.$message.error('您还没有选择引用的数据')
            }
        },



        init() {
            for (let i = 0; i < this.cyList.length; i++) {
                this.checkedGameId.push(this.cyList[i].id);
                // console.log('>>>'+this.checkedGameId);
                // console.log(this.cyList.length)

            }
        },
        handleDelete(id) {
            this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = "/ycous/delete";
                this.$ajax.post(url, {
                    id: id
                }).then(res => {
                    console.log(res);
                    if (res.code == '0') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.pages.page = 1
                        
                        if (this.maxRole == 'cmo') {
                            this.getCmoCourse()
                        } else {
                            this.getJyzData();
                        }
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }).catch();

        },
        handleCheckAllChange(val) {
            this.check = val ? this.checkedGameId : [];
            this.isIndeterminate = false;
            this.number = val ? this.checkedGameId.length : 0;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.number = checkedCount;
            this.checkAll = checkedCount === this.cyList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cyList.length;
        },
        getJyzData() {
            this.$api.Admin.getJyzData({
                schoolid: this.schoolid
            }).then(res => {
                if (res.code == '0') {
                    this.jyzid = res.data;
                    this.$store.commit("setJyzid", res.data);
                    this.listLdkcc();
                    this.xtjyUserList();
                } else {
                    this.$message.error('请求失败！');

                }
            })
        },
        xtjyUserList() {
            this.$api.jyz.xtjyUserList({
                'jyzid': this.jyzid
            }).then(res => {
                if (res.code == '0') {
                    this.cyList = res.list;
                    console.log(res.list)
                    this.init();
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        listLdkcc() {
            this.$api.jyz.xtjyCousList({
                jyzid: this.jyzid
            }).then(res => {
                if (res.code == '0') {
                    this.cousList = res.list;
                    console.log(this.cousList,'this.cousListthis.cousListthis.cousList-----界面获取的')
                } else {
                    this.$message.error('请求失败！');
                }
            })
        },
        addTr() {
            this.$refs.child.listNotInJyzUser();
            this.dialogVisible = true;
        },
        clickClose() {
            this.dialogVisible = false
        },
        //编辑
        upck() {
            this.dialogeditVisible = true;
        },
        clickCloses(visible) {
            this.dialogeditVisible = false;
        },
        clickAdd() {
            if (this.maxRole == 'cmo') {
                this.$router.push({
                    path: "/ldkc_jyzz/CreatCourseCmo"
                })

            } else {
                this.$router.push({
                    path: "/ldkc_jyzz/cjkc_jyzz"
                })
            }

            // this.courseSHow = true
            // this.$refs.child1.updateInfo();
        },
        clickCloseCourse() {
            this.courseSHow = false
        },
        handleEdit(item) {
            this.$router.push({
                path: '/ldkc_jyzz/kcxq_jyzz'
            })
            localStorage.setItem('ldkc', JSON.stringify(item))
        }
    }
};
</script>

<style scoped lang="scss">
.el-button {
    padding: 7px 20px !important;
    font-size: 12px !important;
}

.ym,
.sf {
    width: 120px;
}

.sf {
    text-align: center;
}

/deep/.jy-team[data-v-02e60b38] {
    overflow-y: initial;
}

/deep/ .fofnk {
    width: 100%;
    padding-left: 12px;
    text-align: left;

    >.num {
        display: inline-block;
        font-size: 12px;
        width: 20px;
    }

    >.checkStyle {
        >.el-checkbox__input {
            padding-top: 27px;
        }
    }
}

/deep/.el-checkbox {
    margin-right: 0 !important;

    >.el-checkbox__input {
        padding-bottom: 30px !important;
    }
}

/deep/.el-checkbox__input {
    margin-bottom: 0 !important;
}

/deep/ .team::-webkit-scrollbar {
    height: 0 !important;
}

.main-cont {
    height: 100%;
    overflow-y: auto;
}

.el-row {
    &:last-child {
        margin-bottom: 0;
    }
}

.col-list {
    position: relative;
    border-radius: 12px;

    &:hover {
        .delete {
            display: block;
        }
    }
}

.bg-purple {
    background-color: #fafbff;
    transition: .3s ease-in-out;
}

.bg-purple:hover {
    box-shadow: 2px 6px 13px 0px rgba(128, 130, 139, 0.9);
}

.el-plus {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    background: linear-gradient(-13deg, #626BF1, #989BFA);
    border-radius: 16px;
    color: #fff;
    font-size: 26px;
    font-style: normal;
}

.border {
    border: 1px dotted #BEBDE6;
    min-width: 200px;
    border-radius: 12px;
    height: 300px;
    overflow: hidden;

    &:hover {
        border: 1px dotted #626bf1;
        color: #626BF1;
    }
}

.grid-content {
    min-width: 200px;
    border-radius: 12px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #f7f9fd;
    // margin-right: 20px;
    color: #21537e;


    .img {
        height: 180px;
    }

    .course-name {
        font-size: 16px;
        font-weight: bold;
        width: 70%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .course-info {
        span {
            color: #888F9E;
        }
    }

}

.minwith200 {
    // margin-right:10px;
    min-width: 200px;
}

.jy-team {
    position: relative;
    min-width: 260px;
    // height: 600px;
    background-color: #fff;
    overflow-y: auto;
    box-shadow: 1px 3px 9px 0px rgba(176, 181, 191, 0.4);


    .add-btn {
        width: 65px;
        display: flex;
        justify-content: space-between;
        color: #626BF1;
        font-weight: 600;

        .el-icon-plus {
            font-weight: 600;
        }

        >span {
            display: block;
        }
    }

    .user-name {
        width: 140px;

        .es-width {
            text-align: left;
            width: 80px;
            overflow: hidden;
        }
    }

    .role {
        min-width: 110px;
        text-align: center;

    }
}

.chiefEditor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 120px;
    text-align: right;
}

.delete {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
}
</style>
